<template>
  <div
    class="wresize-panel-3"
    @mouseup="onMouseup($event)"
    @mousemove="onMousemove($event)"
  >
    <div class="wresize-panel-left" :style="{ width: divLeft.width + 'px',height:mh+'px'}" >
      <slot name="left"></slot>
    </div>

    <div
      class="wresize-handler-left"
      @mousedown="onMouseDownLeft($event)"
      :style="{ left: divLeftHandler.left + 'px'}" 
    ></div>
<!-- divCenter.left -->
    <div
      class="wresize-panel-center"
      :style="{ left:   '0px', right: divCenter.right + 'px' }"
    >
      <slot name="center"></slot>
    </div>

    <div
      class="wresize-handler-right"
      @mousedown="onMouseDownRight($event)"
      :style="{ right: divRightHandler.right + 'px' }"
    ></div>

    <div class="wresize-panel-right" :style="{ width: divRight.width + 'px' }">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "wresize-panel-3",
  props: {
    leftWidth: {
      type: Number,
      default: 235
    },
    rightWidth: {
      type: Number,
      default: 265
    },
    onResize: {
      type: Function,
      default: undefined
    }
  },
  data() {
    return {
      mh:50,
      flag: "",
      disx: 0,
      divLeft: {
        width: this.leftWidth,
        temp: 0
      },
      divCenter: {
        left: this.leftWidth + 5,
        right: this.rightWidth + 5,
        temp: 0
      },
      divRight: {
        width: this.rightWidth,
        temp: 0
      },
      divLeftHandler: {
        left: this.leftWidth,
        temp: 0
      },
      divRightHandler: {
        right: this.rightWidth,
        temp: 0
      }
    };
  },
  methods: {
    ch(val){
      console.log(val)
     this.ch = val
    },
    onMouseDownLeft(event) {
      this.flag = "left";
      var dom = event.currentTarget;
      this.disx = event.pageX;
      this.divLeftHandler.temp = this.divLeftHandler.left;
      this.divLeft.temp = this.divLeft.width;
      this.divCenter.temp = this.divCenter.left;
    },
    onMouseDownRight(event) {
      this.flag = "right";
      var dom = event.currentTarget;
      this.disx = event.pageX;
      this.divRightHandler.temp = this.divRightHandler.right;
      this.divRight.temp = this.divRight.width;
      this.divCenter.temp = this.divCenter.right;
    },
    onMouseup(event) {
      if (this.flag == "") {
        return;
      }
      if (this.onResize) {
        this.onResize(this.flag);
      }
      this.flag = "";
    },
    onMousemove(event) {
      if (event.which != 1) {
        if (this.flag != "") {
          this.flag = "";
        }
        return;
      }
      if (!this.flag) {
        return;
      }
      var dx = event.pageX - this.disx;
      if (this.flag == "left") {
        this.divLeftHandler.left = this.divLeftHandler.temp + dx;
        this.divLeft.width = this.divLeft.temp + dx;
        this.divCenter.left = this.divCenter.temp + dx;
      } else if (this.flag == "right") {
        this.divRightHandler.right = this.divRightHandler.temp - dx;
        this.divRight.width = this.divRight.temp - dx;
        this.divCenter.right = this.divCenter.temp - dx;
      }
    }
  }
};
</script>

<style lang="scss">
.wresize-panel-3 {
  position: relative;

  .wresize-panel-left {
    position: absolute;
    z-index: 10000;
    opacity: 0.9;
    height: 50px;
    right:285px;
    top: 20px;
    bottom: 0px;
  }

  .wresize-panel-center {
    position: absolute;
    top: 0px;
    bottom: 0px;
  }

  .wresize-panel-right {
    position: absolute;
    right: 0px;
    top: -40px;
    bottom: 0px;
  }

  .wresize-handler-left {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 5px;
    cursor: w-resize;
  }

  .wresize-handler-right {
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 5px;
    cursor: w-resize;
  }
}
</style>
